export default function imgFall() {
    var oBox = document.getElementsByClassName("box");
    var oImg = document.getElementsByClassName('image');
    var oBoxw = oBox[0].offsetWidth;
    var cols = 5;
    loadImg(oImg);
    window.onscroll = function () {
        loadImg(oImg);
    };
    function waterfall(ele, col, eleWidth) {
        var hArr = [];
        for (var i = 0; i < ele.length; i++) {
            if (i < col) {
                hArr.push(ele[i].offsetHeight);
            } else {
                //min不能用于数组，apply的第一个参数传递作用域，第二个参数传递数组。Math.min.apply(null, [1, 2, 3]) 等价于 Math.min(1, 2, 3)
                var minH = Math.min.apply(null, hArr);
                var index = hArr.indexOf(minH);
                ele[i].style.position = 'absolute';
                ele[i].style.top = minH + 'px';           //ele.style.left/top 是有px的，而offsetHeight/offsetWidth是没有px的
                ele[i].style.left = index * eleWidth + 'px';
                hArr[index] += ele[i].offsetHeight;
            }
        }
    }

    function loadImg(arr) {
        for (var i = 0, len = arr.length; i < len; i++) {
            //判断图片相对应视图窗口的高度是否小于屏幕可视窗口大小
            if (arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad) {  //判断图片
                arr[i].isLoad = true;
                if (arr[i].dataset) {                    //判断是否存在HTML5的dataset对象
                    aftLoadImg(arr[i], arr[i].dataset.original);
                } else {
                    aftLoadImg(arr[i], arr[i].getAttribute("data-original"));
                }
                arr[i].style.cssText = "transition: opacity 2s; opacity: 1;"    //使opacity变化在4秒内完成
            }
        }
    }

    function aftLoadImg(obj, url) {
        obj.src = url;
        waterfall(oBox, cols, oBoxw);   //需要再次调用瀑布流方法
    }
}